<!DOCTYPE html>
<html>
<head>
<title>Frequency Spectrum</title>
</head>
<body>
<canvas id="myCanvas" width="550" height="420"></canvas>
<script>
    const canvas = document.getElementById('myCanvas');
    const ctx = canvas.getContext('2d');

    // Style settings
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.lineWidth = 1.5;
    ctx.font = '18px Arial';

    // Coordinates and dimensions
    const yOrigin = 320;
    const x_yAxis = 100; // x-coordinate of the Y-axis line
    const xAxisEnd = 480;

    // X-positions for the spikes
    const x225 = 180;
    const x240 = 280;
    const x255 = 380;

    // Heights of the spikes
    const h_sideband = 110;
    const h_carrier = 220; // Carrier amplitude is twice the sideband amplitude

    // Draw Axes
    // Y-axis
    ctx.beginPath();
    ctx.moveTo(x_yAxis, yOrigin);
    ctx.lineTo(x_yAxis, 50); // Top of y-axis
    ctx.stroke();

    // Arrowhead for Y-axis
    ctx.beginPath();
    ctx.moveTo(x_yAxis, 50);
    ctx.lineTo(x_yAxis - 6, 62);
    ctx.moveTo(x_yAxis, 50);
    ctx.lineTo(x_yAxis + 6, 62);
    ctx.stroke();

    // X-axis
    ctx.beginPath();
    ctx.moveTo(x_yAxis, yOrigin);
    ctx.lineTo(xAxisEnd, yOrigin);
    ctx.stroke();

    // Draw Labels and Ticks
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Y-axis label "amplitude"
    ctx.fillText('amplitude', 60, 160);

    // X-axis label "frequency / kHz"
    ctx.fillText('frequency / kHz', 380, yOrigin + 40);

    // Origin label "0"
    ctx.textAlign = 'right';
    ctx.textBaseline = 'top';
    ctx.fillText('0', x_yAxis - 5, yOrigin);

    // Frequency ticks and labels
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    const tickSize = 4;

    // Tick for 225
    ctx.beginPath();
    ctx.moveTo(x225, yOrigin - tickSize);
    ctx.lineTo(x225, yOrigin + tickSize);
    ctx.stroke();
    ctx.fillText('225', x225, yOrigin + 10);

    // Tick for 240
    ctx.beginPath();
    ctx.moveTo(x240, yOrigin - tickSize);
    ctx.lineTo(x240, yOrigin + tickSize);
    ctx.stroke();
    ctx.fillText('240', x240, yOrigin + 10);

    // Tick for 255
    ctx.beginPath();
    ctx.moveTo(x255, yOrigin - tickSize);
    ctx.lineTo(x255, yOrigin + tickSize);
    ctx.stroke();
    ctx.fillText('255', x255, yOrigin + 10);

    // Draw Spikes
    ctx.lineWidth = 2; // Spikes are slightly thicker than axes

    // Spike at 225 kHz
    ctx.beginPath();
    ctx.moveTo(x225, yOrigin);
    ctx.lineTo(x225, yOrigin - h_sideband);
    ctx.stroke();

    // Spike at 240 kHz
    ctx.beginPath();
    ctx.moveTo(x240, yOrigin);
    ctx.lineTo(x240, yOrigin - h_carrier);
    ctx.stroke();

    // Spike at 255 kHz
    ctx.beginPath();
    ctx.moveTo(x255, yOrigin);
    ctx.lineTo(x255, yOrigin - h_sideband);
    ctx.stroke();

    // Figure Caption
    ctx.font = 'bold 18px Arial';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'bottom';
    ctx.fillText('Fig. 4.1', x240, canvas.height - 15);

</script>
</body>
</html>